<template>
  <view class="detail-container">
    <!-- 警示信息弹窗 -->
    <WarningInfoModal
      :visible="showWarning"
      :warningData="warningData"
      @close="closeWarningModal"
    />

    <!-- 检验信息弹窗 -->
    <TestInfoModal
      :visible="showTest"
      :testData="testData"
      @close="closeTestModal"
    />

    <!-- 右侧按钮组 -->
    <view class="side-buttons">
      <view class="side-btn" @click="showWarningInfo">
        <text class="side-btn-text">警示信息</text>
      </view>
      <view class="side-btn" @click="showTestInfo">
        <text class="side-btn-text">检验信息</text>
      </view>
    </view>

    <!-- 处方信息卡片 -->
    <view class="prescription-card">
      <view class="card-header">
        <text class="card-title">门诊处方笺</text>
        <view class="type-tag">普通药<br />品处方</view>
      </view>

      <view class="info-section">
        <view class="info-row">
          <text class="info-label">NO：</text>
          <text class="info-value">{{ prescription.prescriptionNo }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">姓名：</text>
          <text class="info-value">{{ prescription.patientName }}</text>
          <text class="info-label ml">性别：</text>
          <text class="info-value">{{ prescription.gender }}</text>
          <text class="info-label ml">年龄：</text>
          <text class="info-value">{{ prescription.age }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">科室：</text>
          <text class="info-value">{{ prescription.department }}</text>
          <text class="info-label ml">日期：</text>
          <text class="info-value">{{ prescription.sendTime }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">诊断：</text>
          <text class="info-value">{{ prescription.diagnosis }}</text>
        </view>
      </view>

      <view class="divider">
        <text class="divider-text">Rp：</text>
      </view>

      <!-- 药品列表 -->
      <view class="medicine-list">
        <view
          v-for="(item, index) in prescription.medicines"
          :key="index"
          class="medicine-item"
        >
          <view class="medicine-header">
            <text class="medicine-index">{{ index + 1 }}、</text>
            <text class="medicine-name">{{ item.name }}</text>
            <text class="medicine-quantity">x{{ item.quantity }}</text>
          </view>
          <view class="medicine-usage">
            <text>用法：{{ item.usage }}</text>
          </view>
          <view class="medicine-note">
            <text>备注：{{ item.note }}</text>
          </view>
        </view>
      </view>

      <view class="divider-line"></view>

      <!-- 签名区域 -->
      <view class="signature-section">
        <view class="signature-item">
          <text class="signature-label">医师签名：</text>
        </view>
        <view class="signature-item">
          <text class="signature-label">药师签名：</text>
        </view>
      </view>
    </view>

    <!-- 修改意见/降级意见标题 -->
    <view class="section-title">{{ optionTitle }}</view>

    <!-- 审核/降级选项 -->
    <view class="audit-options">
      <radio-group @change="onAuditChange">
        <label class="radio-item">
          <radio
            value="pass"
            :checked="auditResult === 'pass'"
            color="#4375FB"
          />
          <text>通过</text>
        </label>
        <label class="radio-item">
          <radio
            value="reject"
            :checked="auditResult === 'reject'"
            color="#4375FB"
          />
          <text>不通过</text>
        </label>
      </radio-group>
    </view>

    <!-- 底部按钮 -->
    <view class="footer-btn">
      <button class="submit-btn" @click="handleSubmit">
        {{ submitBtnText }}
      </button>
    </view>
  </view>
</template>

<script>
import WarningInfoModal from "@/components/WarningInfoModal.vue";
import TestInfoModal from "@/components/TestInfoModal.vue";

export default {
  components: {
    WarningInfoModal,
    TestInfoModal,
  },
  data() {
    return {
      pageType: "audit", // 页面类型: audit-审方, downgrade-降级确认
      source: "", // 来源页面: outpatient-门急诊, inpatient-住院
      prescription: {
        prescriptionNo: "",
        patientName: "",
        gender: "",
        age: "",
        department: "",
        sendTime: "",
        diagnosis: "",
        medicines: [],
      },
      auditResult: "pass", // 默认通过
      prescriptionIndex: -1, // 处方在列表中的索引
      showWarning: false, // 控制警示信息弹窗显示
      showTest: false, // 控制检验信息弹窗显示
      warningData: [
        // 示例数据 - 富文本格式
        {
          content:
            '<span style="color:#FF0000;">【毒级6】</span>头孢哌酮皮试<span style="color:#0080FF;">点击查看说明书 (0107_01)</span>',
        },
        {
          content:
            '<span style="color:#000000;">【警示信息-患者用药】该病人在【天数】内开具过【成分名称】超过【禁标计量总量】，请重新给药。（依据：说明书）</span>',
        },
        {
          content: '<span style="color:#000000;">【建议信息】禁用。</span>',
        },
        {
          content:
            '<span style="color:#FF0000;">【毒级6】</span>头孢哌酮皮试<span style="color:#0080FF;">点击查看说明书 (0107_01)</span>',
        },
        {
          content:
            '<span style="color:#000000;">【警示信息-患者用药】该病人在【天数】内开具过【成分名称】超过【禁标计量总量-2】，请重新给药。（依据：说明书）</span>',
        },
        {
          content:
            '<span style="color:#FF0000;">【毒级4】</span>头孢哌酮皮试<span style="color:#0080FF;">点击查看说明书说明码</span>',
        },
        {
          content:
            '<span style="color:#000000;">【警示信息-患者用药】该病人在【天数】内开具过【成分名称】超过【禁标计量总量-2】，请重新给药。（依据：说明书）</span>',
        },
        {
          content: '<span style="color:#000000;">【建议信息】禁用。</span>',
        },
      ],
      testData: [
        // 检验信息示例数据
        { name: "内生肌酐清除率", value: "", unit: "" },
        { name: "血肌酐", value: "", unit: "" },
      ],
    };
  },
  onLoad(options) {
    // 接收传递的参数
    if (options.data) {
      const data = JSON.parse(decodeURIComponent(options.data));
      this.prescription = data.prescription;
      this.prescriptionIndex = data.index;
    }

    // 接收页面类型参数
    if (options.type) {
      this.pageType = options.type; // audit-审方, downgrade-降级确认
    }

    // 接收来源页面参数
    if (options.source) {
      this.source = options.source; // outpatient-门急诊, inpatient-住院
    }
  },
  computed: {
    // 页面标题
    pageTitle() {
      return this.pageType === "downgrade" ? "降级确认" : "审方";
    },
    // 按钮文字
    submitBtnText() {
      return this.pageType === "downgrade" ? "确认降级" : "提交审核";
    },
    // 选项标题
    optionTitle() {
      return this.pageType === "downgrade" ? "降级意见" : "处方审核意见";
    },
    // 获取缓存键名
    cacheKey() {
      if (this.pageType === "audit") {
        // 审方模式
        return this.source === "inpatient"
          ? "inpatientAuditedList"
          : "auditedList";
      } else {
        // 降级模式
        return this.source === "inpatient"
          ? "residenceDowngradeList"
          : "downgradeList";
      }
    },
  },
  methods: {
    // 显示警示信息
    showWarningInfo() {
      this.showWarning = true;
    },

    // 关闭警示信息弹窗
    closeWarningModal() {
      this.showWarning = false;
    },

    // 显示检验信息
    showTestInfo() {
      this.showTest = true;
    },

    // 关闭检验信息弹窗
    closeTestModal() {
      this.showTest = false;
    },

    // 审核选项变更
    onAuditChange(e) {
      this.auditResult = e.detail.value;
    },

    // 提交审核或确认降级
    handleSubmit() {
      if (this.pageType === "downgrade") {
        // 降级确认逻辑
        this.handleDowngrade();
      } else {
        // 审方逻辑
        this.handleAudit();
      }
    },

    // 处理审方提交
    handleAudit() {
      // 保存审核结果到全局状态或缓存
      const auditData = {
        index: this.prescriptionIndex,
        result: this.auditResult,
        auditTime: new Date().toLocaleString(),
      };

      // 获取已审核列表(使用动态缓存键)
      let auditedList = uni.getStorageSync(this.cacheKey) || [];

      // 检查是否已存在
      const existIndex = auditedList.findIndex(
        (item) => item.index === this.prescriptionIndex
      );
      if (existIndex > -1) {
        auditedList[existIndex] = auditData;
      } else {
        auditedList.push(auditData);
      }

      // 保存到缓存(使用动态缓存键)
      uni.setStorageSync(this.cacheKey, auditedList);

      uni.showToast({
        title: "提交成功",
        icon: "success",
        duration: 1500,
      });

      // 延迟返回上一页
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },

    // 处理降级确认
    handleDowngrade() {
      // 保存降级确认结果
      const downgradeData = {
        index: this.prescriptionIndex,
        result: this.auditResult, // 保存选择结果
        confirmTime: new Date().toLocaleString(),
        type: "downgrade",
      };

      // 获取已确认降级列表(使用动态缓存键)
      let downgradeList = uni.getStorageSync(this.cacheKey) || [];

      // 检查是否已存在
      const existIndex = downgradeList.findIndex(
        (item) => item.index === this.prescriptionIndex
      );
      if (existIndex > -1) {
        downgradeList[existIndex] = downgradeData;
      } else {
        downgradeList.push(downgradeData);
      }

      // 保存到缓存(使用动态缓存键)
      uni.setStorageSync(this.cacheKey, downgradeList);

      uni.showToast({
        title: "降级确认成功",
        icon: "success",
        duration: 1500,
      });

      // 延迟返回上一页
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
  },
};
</script>

<style scoped>
.detail-container {
  min-height: calc(100vh - 210rpx);
  background-color: #f5f5f5;
  padding: 20rpx 30rpx;
  position: relative;
}

/* 右侧按钮组 */
.side-buttons {
  position: fixed;
  top: 235rpx;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.side-btn {
  width: 120rpx;
  height: 60rpx;
  background-color: #ffe0b2;
  border-radius: 8rpx 0 0 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -2rpx 2rpx 10rpx rgba(255, 152, 0, 0.2);
  cursor: pointer;
}

.side-btn:active {
  opacity: 0.8;
}

.side-btn-text {
  color: #e65100;
  font-size: 26rpx;
}

/* 处方卡片 */
.prescription-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.card-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  padding-top: 10rpx;
}

.card-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333333;
  text-align: center;
}

.type-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  font-size: 26rpx;
  background-color: #e3f2fd;
  color: #2196f3;
}

/* 信息区域 */
.info-section {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 12rpx;
  font-size: 26rpx;
}

.info-label {
  color: #666666;
  min-width: 80rpx;
}

.info-label.ml {
  margin-left: 30rpx;
}

.info-value {
  color: #333333;
}

/* 分割线 */
.divider {
  margin: 20rpx 0;
  border-bottom: 1rpx solid #eeeeee;
  padding-bottom: 10rpx;
}

.divider-text {
  font-size: 28rpx;
  color: #333333;
  font-weight: bold;
}

/* 药品列表 */
.medicine-list {
  margin: 20rpx 0;
}

.medicine-item {
  margin-bottom: 30rpx;
  font-size: 26rpx;
  color: #333333;
}

.medicine-header {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.medicine-index {
  color: #333333;
  margin-right: 8rpx;
}

.medicine-name {
  flex: 1;
  color: #333333;
}

.medicine-quantity {
  color: #4375fb;
  font-weight: bold;
}

.medicine-usage,
.medicine-note {
  margin-left: 30rpx;
  margin-bottom: 6rpx;
  color: #666666;
  line-height: 1.6;
}

.divider-line {
  border-top: 1rpx dashed #cccccc;
  margin: 20rpx 0;
}

/* 签名区域 */
.signature-section {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
}

.signature-item {
  font-size: 26rpx;
  color: #666666;
}

/* 修改意见标题 */
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin: 20rpx 0;
}

/* 审核选项 */
.audit-options {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #333333;
}

.radio-item:last-child {
  margin-bottom: 0;
}

.radio-item radio {
  margin-right: 16rpx;
}

/* 底部按钮 */
.footer-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #4375fb 0%, #8e6bfd 100%);
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 12rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 88rpx;
}

.submit-btn::after {
  border: none;
}
</style>
